<template>
	<div class="progressParent-wrapper">
		<transition name="slide-up">
			<div class="progress-wrapper" v-show="menuVisble && settingVisible === -1">
				<div class="progress-content-wrapper">
					<span :class="{'noclick':isNoclick('pre')}" @click="handleClickPreButton" class="progress-content-text">上一章</span>
					<div class="progress-content-inner">
						<el-slider @change="onProgressChange" @input="onProgressInput" :max="100" :min="0" :step="1" v-model="progress" :show-tooltip="false" :disabled="!bookAvailable"></el-slider>
					</div>
					<span :class="{'noclick':isNoclick('next')}" @click="handleClickNextButton" class="progress-content-text">下一章</span>
				</div>
			</div>
		</transition>
		<transition name="fade">
		<div class="progress-bookInfo-wrapper"  v-show="isShowbookInfo && menuVisble" >
			<span class="progress-bookInfo-percent">{{progress}}%</span>
			<div class="progress-bookInfo-content">
				<span class="bookInfo-content-title">{{getSctionName()}}</span>
			</div>
		</div>
		</transition>
	</div>
</template>

<script>
	import {
		ebookMixin
	} from '../../utils/mixin.js';
	// import {
	// 	setBookObjectProperty
	// } from '../../utils/localstorage.js';
	// import {
	// 	DEFAULT_FONT_FAMILY,
	// 	FONT_FAMILY
	// } from '../../utils/bookStaticData';
	export default {
		name: 'ebookPopupWrapper',
		mixins: [ebookMixin],
		data() {
			return {
				isShowbookInfo: false, // 是否显示图书信息
				timtout: null,
				inputNum: 0 // 滑动progress次数
			}
		},

		computed: {
			progress: {
				get() {
					return this.$store.state.book.progress
				},
				set(val) {
					this.setprogress({
						progress: val
					})
				}
			},
			isNoclick() {
				return (key) => {
					if(key === 'pre') {
						if(this.section > 0 && this.bookAvailable) {
							return false
						}
					}else {
						if(this.navigation && this.navigation.length) {
							if(this.section < (this.navigation.length - 1) && this.bookAvailable) {
								return false
							}
						}
					}
					return true
				}
			}
		},
		watch: {
			menuVisble(val) {
				if(!val && this.timtout) {
					this.isShowbookInfo  = false
					clearTimeout(this.timtout)
				}else if(val) {
					this.isShowbookInfo  = true
					this.handleShowbookInfo()
				}
			},
			navigation() {
				// 初始化 section
				this.handleInitSection()
			}
		},
		methods: {
			// 获取章节标题
			getSctionName() {
				let sectionInfo
				this.navigation.forEach((item,index) => {
					if(index === this.section) {
						sectionInfo = item
					}
				})
				if(sectionInfo) {
					return sectionInfo.label ? sectionInfo.label : ''
				}
				
			},
			
			// 处理点击上一章按钮
			handleClickPreButton() {
				if(this.section > 0 && this.bookAvailable) {
					this.setsection({
						'section': this.section - 1
					}).then(()=> {
						this.displayBookBySection()
					})
				}
			},
			// 处理点击下一章按钮
			handleClickNextButton() {
				if(this.navigation && this.navigation.length) {
					if(this.section < (this.navigation.length - 1) && this.bookAvailable) {
						this.setsection({
							section: this.section + 1
						}).then(()=> {
							this.displayBookBySection()
						})
					}
				}
			},
			
			// 根据章节去渲染图书
			displayBookBySection() {
				let sectionInfo
				this.navigation.forEach((item,index) => {
					if(index === this.section) {
						sectionInfo = item
					}
				})
				
				if(sectionInfo && sectionInfo.href) {
					this.display(sectionInfo.href,() => {
						this.refreshLocation()
						this.handleShowbookInfo()
					})
				}
			},
			onProgressChange(e) {
				this.setprogress({
					progress: e
				}).then(() => {
					// 渲染图书 至当前进度
					this.displayProgress()
				})
				
				this.handleShowbookInfo(1000)
			},
			onProgressInput() {
				// 第一次获取到progress 会自动改变 ，此次不显示
				if(this.bookAvailable && !this.isShowbookInfo) {
					this.inputNum = this.inputNum + 1
					if(this.inputNum > 1) {
						this.isShowbookInfo =  true
					}
				}
			},
			// 渲染图书 至当前进度
			displayProgress() {
				// 传值为小数点形式
				let cfi = this.currentBook.locations.cfiFromPercentage(this.progress / 100)
				
				this.display(cfi,() => {
					// 初始化section
					this.handleInitSection()
				})
			},
			handleShowbookInfo(time = 2000) {
				if(this.timtout) {
					clearTimeout(this.timtout)
				}

				this.timtout = setTimeout(() => {
					this.isShowbookInfo = false
				},time)
			},
			
			
		},
		updated() {
		},
		mounted() {
			
		},
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/global.scss';
	
	.progress-wrapper {
		position: absolute;
		bottom: pxTorem(48);
		left: 0;
		z-index: 101;
		width: 100%;
		height: pxTorem(80);
		background: white;
		box-shadow: 0 pxTorem(-8) pxTorem(8) rgba(0,0,0,.15);
		@include  flexCenter;
		.progress-content-wrapper {
			width: 100%;
			font-size: pxTorem(14);
			@include  flexSpacebetween;
			padding: 0px pxTorem(20);
			.progress-content-inner {
				flex: 1;
				margin: 0 pxTorem(15);
				/deep/.el-slider {
					width: 100%;
					.el-slider__runway {
						height: pxTorem(3);
						.el-slider__bar {
							height: pxTorem(3);
						}
						.el-slider__button-wrapper {
							top: pxTorem(-16);
							.el-slider__button {
								width: pxTorem(8);
								height: pxTorem(8);
							}
						}
					}
				}
			}
			.progress-content-text{
				&.noclick {
					opacity: .3;
				}
			}
		}
	}
	.progress-bookInfo-wrapper {
		position: fixed;
		bottom: pxTorem(160);
		left: 0px;
		right: 0px;
		width: pxTorem(250);
		height: pxTorem(60);
		padding: pxTorem(8) pxTorem(10);
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		border-radius: pxTorem(40);
		margin: auto;
		text-align: center;
		box-sizing: border-box;
		.progress-bookInfo-percent {
			font-size: pxTorem(14);
		}
		.progress-bookInfo-content {
			font-size: pxTorem(16);
			@include flexCenter;
			.bookInfo-content-title {
				display: inline-block;
				margin-left: pxTorem(5);
				// width: pxTorem(80);
				@include overShowSpot;
			}
		}
	}
</style>